<template>
    <view class="container-wwqydl">
        <div class="form">
            <!-- 游戏区服 -->
            <div class="form-item">
                <text class="label">游戏区服</text>
                <div class="handle" @click="showServerPicker">
                    <view class="selected-tag">
                        {{ selectedServerText || '请选择您所在的区服' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>

            <!-- 代练类型 -->
            <div class="form-item">
                <text class="label">代练类型</text>
                <div class="handle" @click="showModePicker">
                    <view class="selected-tag">
                        {{ selectedMode || '请选择代练类型' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>


            <!-- 通行证 -->
            <div class="form-item pass-item" v-if="selectedMode == '通行证'">
                <text class="label">通行证</text>
                <div class="handle pass-handle">
                    <uni-data-checkbox mode="button" v-model="selectPass" :localdata="passOptions"></uni-data-checkbox>
                </div>
            </div>

            <!-- 代练任务（通行证） -->
            <div class="form-item" v-if="selectedMode == '通行证'">
                <text class="label">代练任务</text>
                <div class="handle" @click="showCurrentLevelPicker">
                    <view class="selected-tag">
                        {{ levelsDisplay || '请输入当前等级和目标等级' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 代练任务（排位赛） -->
            <div class="form-item" v-if="selectedMode == '排位赛'">
                <text class="label">代练任务</text>
                <div class="handle" @click="showCurrentTaskTypePicker">
                    <view class="selected-tag">
                        {{ rankDisplay || '请选择当前段位和目标段位' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 当前分数 -->
            <div class="form-item" v-if="selectedMode == '排位赛'">
                <text class="label">当前分数</text>
                <div class="handle" @click="showCurrentScorePicker">
                    <view class="selected-tag">
                        {{ currentScore !== '' ? currentScore : '请输入当前分数' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 上赛季段位 -->
            <div class="form-item" v-if="selectedMode == '定位赛'">
                <text class="label">上赛季段位</text>
                <div class="handle" @click="showBeforeLevelPicker">
                    <view class="selected-tag">
                        {{ beforeLevel || '请选择上赛季段位' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
            <!-- 需打场次 -->
            <div class="form-item" v-if="selectedMode == '定位赛'">
                <text class="label">需打场次</text>
                <div class="handle" @click="showNeedGamesPicker">
                    <view class="selected-tag">
                        {{ needGames || '请选择需打场次' }}
                        <image src="../../static/icons/arrow-down.png"></image>
                    </view>
                </div>
            </div>
        </div>

        <!-- Popups -->
        <!-- 游戏区服选择弹窗 -->
        <uni-popup ref="serverPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择游戏区服</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in serverTree" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedGroupIndex === groupIndex }" @click="selectGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedGroupIndex !== null && serverTree[selectedGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in serverTree[selectedGroupIndex].children" :key="itemIndex"
                                class="popup-item" @click="selectServerItem(item)">
                                {{ item.text }}
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideServerPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 代练类型选择弹窗 -->
        <uni-popup ref="modePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择代练类型</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in modeTree" :key="index" class="popup-item" @click="selectModeItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideModePicker">取消</view>
            </view>
        </uni-popup>


        <!-- 代练任务（通行证）弹窗 -->
        <uni-popup ref="currentLevelPopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">通行证等级</div>
                <div class="input-row">
                    <span>当前等级</span>
                    <input type="number" placeholder="请输入当前等级" v-model="tempCurrentLevel">
                </div>
                <div class="input-row">
                    <span>目标等级</span>
                    <input type="number" placeholder="请输入目标等级" v-model="tempToLevel">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideCurrentLevelPicker">取消</span>
                    <span class="confirm" @click="confirmCurrentLevelPicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 当前段位选择弹窗 -->
        <uni-popup ref="currentTaskTypePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择当前段位</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedCurrentTaskGroupIndex === groupIndex }"
                            @click="selectCurrentTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedCurrentTaskGroupIndex !== null && Task[selectedCurrentTaskGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in Task[selectedCurrentTaskGroupIndex].children" :key="itemIndex"
                                class="popup-item">
                                <div class="popup-item-title">{{ item.text }}</div>
                                <div class="popup-item-body">
                                    <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                        @click="selectCurrentTaskItem(item.text, item2.text)" class="popup-item-body-item"
                                        :style="{ width: item.text == '无畏战魂' ? '32%' : '' }">
                                        <span>{{ item2.text }}</span>
                                    </view>
                                </div>
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideCurrentTaskTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 目标段位选择弹窗 -->
        <uni-popup ref="toTaskTypePopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择目标段位</div>
                <div class="body">
                    <scroll-view scroll-y class="popup-nav">
                        <view v-for="(group, groupIndex) in Task" :key="groupIndex" class="nav-item"
                            :class="{ active: selectedToTaskGroupIndex === groupIndex }"
                            @click="selectToTaskGroup(groupIndex)">
                            {{ group.text }}
                        </view>
                    </scroll-view>
                    <scroll-view scroll-y class="popup-scroll">
                        <view v-if="selectedToTaskGroupIndex !== null && Task[selectedToTaskGroupIndex]" class="popup-group">
                            <view v-for="(item, itemIndex) in Task[selectedToTaskGroupIndex].children" :key="itemIndex"
                                class="popup-item">
                                <div class="popup-item-title">{{ item.text }}</div>
                                <div class="popup-item-body">
                                    <view v-for="(item2, itemIndex2) in item.children" :key="itemIndex2"
                                        @click="selectToTaskItem(item.text, item2.text)" class="popup-item-body-item"
                                        :style="{ width: item.text == '无畏战魂' ? '32%' : '' }">
                                        <span>{{ item2.text }}</span>
                                    </view>
                                </div>
                            </view>
                        </view>
                        <view v-else class="popup-empty">请选择左侧分类</view>
                    </scroll-view>
                </div>
                <view class="popup-footer" @click="hideToTaskTypePicker">取消</view>
            </view>
        </uni-popup>

        <!-- 当前分数弹窗 -->
        <uni-popup ref="currentScorePopup" type="bottom">
            <view class="popup-content input-popup">
                <div class="top">当前分数</div>
                <div class="input-row score-input">
                    <span>分数</span>
                    <input type="number" placeholder="请输入当前分数" v-model="tempCurrentScore">
                </div>
                <view class="popup-footer2">
                    <span class="cancel" @click="hideCurrentScorePicker">取消</span>
                    <span class="confirm" @click="confirmCurrentScorePicker">确认</span>
                </view>
            </view>
        </uni-popup>

        <!-- 上赛季段位选择弹窗 -->
        <uni-popup ref="beforeLevelPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择上赛季段位</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in beforeLevelTree" :key="index" class="popup-item"
                        @click="selectBeforeLevelItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideBeforeLevelPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 需打场次选择器弹窗 -->
        <uni-popup ref="needGamesPopup" type="bottom">
            <view class="popup-content">
                <div class="top">请选择需打场次</div>
                <scroll-view scroll-y class="popup-scroll">
                    <view v-for="(item, index) in needGamesTree" :key="index" class="popup-item"
                        @click="selectNeedGamesItem(item)">
                        {{ item.text }}
                    </view>
                </scroll-view>
                <view class="popup-footer" @click="hideNeedGamesPicker">取消</view>
            </view>
        </uni-popup>

        <!-- 订单信息区域 -->
        <div class="orderMsg">
            <div class="pay">
                <image src="../../static/icons/pay.png"></image>
                <div class="text">建议出价 <span class="price-highlight">{{ suggestedPrice }}元</span></div>
            </div>
            <div class="time">
                <image src="../../static/icons/time.png"></image>
                <div class="text">预计时限 <span class="time-highlight">{{ estimatedTime }}小时</span></div>
            </div>
        </div>

        <!-- 底部占位 -->
        <view class="footer-placeholder"></view>

        <!-- 底部按钮 -->
        <div class="footer">
            <div class="tip">代练通全程为您服务</div>
            <div class="button" @click="submitOrder">下一步</div>
        </div>
    </view>
</template>

<script>
export default {
  components: {
    // 如果使用了 uni-ui 组件且需要在 script 中引用，可以在这里注册
    // 例如：'uni-popup': () => import('@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue')
  },
  data() {
    return {
      // 将 ref 转换为 data 属性
      serverTree: [
        {
            text: '默认区',
            value: "默认区",
            children: [
                { text: '默认服', value: "默认服" },
            ]
        }
      ],
      selectedServer: "默认服",
      selectedGroupIndex: 0,

      modeTree: [
        { text: '排位赛', value: "排位赛" },
        { text: '定位赛', value: "定位赛" },
        { text: '通行证', value: "通行证" },
      ],
      selectedMode: "排位赛",

      // 通行证选项
      passOptions: [
          { text: '已有通行证', value: '已有通行证' },
          { text: '没有通行证', value: '没有通行证' }
      ],
      selectPass: "已有通行证",

      // 等级（通行证）
      currentLevel: '',
      toLevel: '',
      tempCurrentLevel: '', // 弹窗临时变量
      tempToLevel: '',

      // 段位（排位赛）
      Task: [], // 在 mounted 中创建
      selectedCurrentTask: "",
      selectedCurrentTaskGroupIndex: 0,
      selectedToTask: "",
      selectedToTaskGroupIndex: 0,

      // 分数（排位赛）
      currentScore: '',
      tempCurrentScore: '', // 弹窗临时变量

      // 上赛季段位（定位赛）
      beforeLevelTree: [
          { text: '新号', value: "新号" }, { text: '黑铁', value: "黑铁" }, { text: '青铜', value: "青铜" },
          { text: '白银', value: "白银" }, { text: '黄金', value: "黄金" }, { text: '铂金', value: "铂金" },
          { text: '钻石', value: "钻石" }, { text: '超凡', value: "超凡" }, { text: '神话', value: "神话" },
          { text: '无畏战魂', value: "无畏战魂" },
      ],
      beforeLevel: "",

      // 需打场次（定位赛）
      needGamesTree: [
          { text: '1场', value: "1场" }, { text: '2场', value: "2场" }, { text: '3场', value: "3场" },
          { text: '4场', value: "4场" }, { text: '5场', value: "5场" }
      ],
      needGames: "",

      // 表单数据 (替代 Composition API 中的 formData.value)
      formData: {
          server: '',
          mode: '',
          selectPass: '',
          currentLevel: '',
          toLevel: '',
          currentTask: '',
          toTask: '',
          currentScore: '',
          needGames: '',
          beforeLevel: '',
      },

      // 价格/时间 (示例值)
      suggestedPrice: 87,
      estimatedTime: 47,
    };
  },
  computed: {
      // 添加计算属性，用于模板中展示数据
      selectedServerText() {
          if (this.serverTree && this.serverTree[this.selectedGroupIndex]) {
              return `${this.serverTree[this.selectedGroupIndex].text}/${this.selectedServer}`;
          }
          return ''; // 或者返回 '请选择您所在的区服'
      },
      levelsDisplay() {
          if (this.currentLevel !== '' && this.toLevel !== '') {
              return `${this.currentLevel}级 - ${this.toLevel}级`;
          }
          return ''; // 或者返回 '请输入当前等级和目标等级'
      },
      rankDisplay() {
           if (this.selectedCurrentTask && this.selectedToTask) {
               return `${this.selectedCurrentTask} - ${this.selectedToTask}`;
           }
           return ''; // 或者返回 '请选择当前段位和目标段位'
      }
  },
  mounted() {
    // 将 onMounted 的逻辑移到 mounted 钩子
    this.createTaskList();
  },
  methods: {
    // --- Popup Show/Hide 通用方法 ---
    showPopup(refName) {
        // 访问 $refs 前检查是否存在
        if (this.$refs[refName]) {
            this.$refs[refName].open();
        } else {
             console.error(`Popup ref '${refName}' not found or not ready.`);
             // 可以考虑添加 uni.showToast 提示用户稍后再试
             // uni.showToast({ title: '组件加载中，请稍后重试', icon: 'none' });
        }
    },
    hidePopup(refName) {
         if (this.$refs[refName]) {
            this.$refs[refName].close();
        } else {
             console.error(`Popup ref '${refName}' not found or not ready.`);
        }
    },

    // --- 具体 Picker 方法 ---
    // 区服选择
    showServerPicker() { this.showPopup('serverPopup'); },
    hideServerPicker() { this.hidePopup('serverPopup'); },
    selectGroup(index) { this.selectedGroupIndex = index; },
    selectServerItem(item) {
        this.selectedServer = item.text;
        this.hideServerPicker();
    },

    // 代练类型选择
    showModePicker() { this.showPopup('modePopup'); },
    hideModePicker() { this.hidePopup('modePopup'); },
    selectModeItem(item) {
        this.selectedMode = item.text;
        this.resetConditionalFields(); // 重置依赖于类型的字段
        this.hideModePicker();
    },

    // 等级（通行证）选择
    showCurrentLevelPicker() {
         // 将当前值加载到弹窗的临时变量中
         this.tempCurrentLevel = this.currentLevel;
         this.tempToLevel = this.toLevel;
         this.showPopup('currentLevelPopup');
    },
    hideCurrentLevelPicker() {
        // 如果用户取消，不清空临时变量可能导致下次打开还是旧值
        // 清空确认值，不清空临时值
        // this.tempCurrentLevel = '';
        // this.tempToLevel = '';
        this.hidePopup('currentLevelPopup');
    },
    confirmCurrentLevelPicker() {
         // 添加简单验证
        if (this.tempCurrentLevel === '' || this.tempToLevel === '') {
             uni.showToast({ title: '请输入等级', icon: 'none' });
             return;
        }
         if (parseInt(this.tempToLevel) <= parseInt(this.tempCurrentLevel)) {
              uni.showToast({ title: '目标等级需大于当前等级', icon: 'none' });
             return;
         }
        this.currentLevel = this.tempCurrentLevel;
        this.toLevel = this.tempToLevel;
        this.hideCurrentLevelPicker();
    },

    // 段位列表创建
    createTaskList() {
        const tiers = ['黑铁', '青铜', '白银', '黄金', '铂金', '钻石', '超凡', '神话'];
        const taskList = [];
        tiers.forEach(tier => {
            let tierItem = { text: tier, value: tier, children: [] };
            let subTierItem = { text: `${tier}`, value: `${tier}`, children: [] };
            const stars = Array.from({ length: 3 }, (_, index) => ({ text: `${index + 1}`, value: `${index + 1}` }));
            subTierItem.children = stars;
            tierItem.children.push(subTierItem);
            taskList.push(tierItem);
        });
        taskList.push({
            text: '无畏战魂', value: '无畏战魂', children: [{ text: '无畏战魂', value: '无畏战魂', children: [{ text: '无畏战魂', value: '无畏战魂' }] }]
        });
        taskList.push({
            text: '新号', value: '新号', children: [{ text: '新号', value: '新号', children: [{ text: '新号', value: '新号' }] }]
        });
        this.Task = taskList;
    },

    // 当前段位（排位赛）选择
    showCurrentTaskTypePicker() { this.showPopup('currentTaskTypePopup'); },
    hideCurrentTaskTypePicker() { this.hidePopup('currentTaskTypePopup'); },
    selectCurrentTaskGroup(index) { this.selectedCurrentTaskGroupIndex = index; },
    selectCurrentTaskItem(text1, text2) {
        this.selectedCurrentTask = `${text1} ${text2}`;
        this.hideCurrentTaskTypePicker();
        // 选择当前段位后自动弹出目标段位选择器
        this.$nextTick(() => { // 确保上一个弹窗关闭动画完成后再打开新的
             this.showToTaskTypePicker();
        });
    },

    // 目标段位（排位赛）选择
    showToTaskTypePicker() { this.showPopup('toTaskTypePopup'); },
    hideToTaskTypePicker() { this.hidePopup('toTaskTypePopup'); },
    selectToTaskGroup(index) { this.selectedToTaskGroupIndex = index; },
    selectToTaskItem(text1, text2) {
        const targetRank = `${text1} ${text2}`;
         // 添加目标段位必须大于等于当前段位的校验
         if (!this.validateRankOrder(this.selectedCurrentTask, targetRank)) {
             return; // 校验失败，不设置值并提示
         }
        this.selectedToTask = targetRank;
        this.hideToTaskTypePicker();
    },

    // 段位顺序校验
    validateRankOrder(currentRank, targetRank) {
        const findRankIndex = (rankString) => {
            if (!rankString) return -1;
            const parts = rankString.split(' ');
            const tier = parts[0];
            const subTier = parts[1];

            const tierIndex = this.Task.findIndex(t => t.text === tier);
            if (tierIndex === -1) return -1;

            // 处理特殊情况：新号 和 无畏战魂
            if (tier === '新号') return 0; // 假设新号是最低的
            if (tier === '无畏战魂') return this.Task.length * 10; // 假设无畏战魂是最高的

            const tierData = this.Task[tierIndex];
            // 确保 children[0] 和 children[0].children 存在
            if (!tierData || !tierData.children || !tierData.children[0] || !tierData.children[0].children) return -1;

            const subTierIndex = tierData.children[0].children.findIndex(s => s.value === subTier);
            if (subTierIndex === -1) return -1; // 如果找不到小段位，也是无效的

            // 返回一个加权值，大段位权重更高
            // 注意：这里假设 subTierIndex 越大段位越高 (例如 3 > 1)
             // 段位序号从1开始，索引从0开始，所以+1。tierIndex从0开始，所以+1。
             // 乘以10给大段位更高的权重
            return (tierIndex + 1) * 10 + (subTierIndex + 1);
        };

        const currentIndex = findRankIndex(currentRank);
        const targetIndex = findRankIndex(targetRank);

        // console.log("Current Rank:", currentRank, "Index:", currentIndex);
        // console.log("Target Rank:", targetRank, "Index:", targetIndex);

        if (currentIndex === -1 || targetIndex === -1) {
             console.warn("无法解析段位进行比较");
             return true; // 如果无法解析，暂时跳过校验，避免阻塞
        }

        if (targetIndex < currentIndex) {
            uni.showToast({ title: '目标段位不能低于当前段位', icon: 'none' });
            return false;
        }
         return true;
    },


    // 当前分数（排位赛）选择
    showCurrentScorePicker() {
        this.tempCurrentScore = this.currentScore;
        this.showPopup('currentScorePopup');
    },
    hideCurrentScorePicker() {
        // this.tempCurrentScore = ''; // 取消时不重置，保留用户输入
        this.hidePopup('currentScorePopup');
    },
    confirmCurrentScorePicker() {
        // 添加校验，例如必须是数字
        if (this.tempCurrentScore === '' || isNaN(Number(this.tempCurrentScore))) {
            uni.showToast({ title: '请输入有效的分数', icon: 'none' });
            return;
        }
        this.currentScore = this.tempCurrentScore;
        // 更新 formData 中的值
        this.formData.currentScore = this.currentScore;
        this.hideCurrentScorePicker();
    },

    // 上赛季段位（定位赛）选择
    showBeforeLevelPicker() { this.showPopup('beforeLevelPopup'); },
    hideBeforeLevelPicker() { this.hidePopup('beforeLevelPopup'); },
    selectBeforeLevelItem(item) {
        this.beforeLevel = item.text;
        this.hideBeforeLevelPicker();
    },

    // 需打场次（定位赛）选择
    showNeedGamesPicker() { this.showPopup('needGamesPopup'); },
    hideNeedGamesPicker() { this.hidePopup('needGamesPopup'); },
    selectNeedGamesItem(item) {
        this.needGames = item.text;
        this.hideNeedGamesPicker();
    },

    // --- 辅助方法 ---
    resetConditionalFields() {
        // 当 selectedMode 改变时调用，重置依赖于它的字段
        this.selectPass = '已有通行证';
        this.currentLevel = '';
        this.toLevel = '';
        this.selectedCurrentTask = '';
        this.selectedToTask = '';
        this.currentScore = '';
        this.beforeLevel = '';
        this.needGames = '';
        // 清空 formData 中对应的字段
        this.formData = {
            ...this.formData, // 保留 server 和 mode
            selectPass: '',
            currentLevel: '',
            toLevel: '',
            currentTask: '',
            toTask: '',
            currentScore: '',
            needGames: '',
            beforeLevel: '',
        };
    },

     // --- 表单校验 ---
    validateForm() {
        if (!this.selectedServerText) { // 使用计算属性校验
           uni.showToast({ title: '请选择游戏区服', icon: 'none' });
           return false;
       }
        if (!this.selectedMode) {
            uni.showToast({ title: '请选择代练类型', icon: 'none' });
           return false;
       }

       switch (this.selectedMode) {
           case '通行证':
               if (this.currentLevel === '' || this.toLevel === '') { uni.showToast({ title: '请输入通行证等级', icon: 'none' }); return false; }
               // 可以在 confirm 时校验，这里重复校验也可以
                if (parseInt(this.toLevel) <= parseInt(this.currentLevel)) { uni.showToast({ title: '目标等级需大于当前等级', icon: 'none' }); return false; }
               break;
           case '排位赛':
               if (!this.selectedCurrentTask || !this.selectedToTask) { uni.showToast({ title: '请选择当前和目标段位', icon: 'none' }); return false; }
                // 再次校验段位顺序
               if (!this.validateRankOrder(this.selectedCurrentTask, this.selectedToTask)) return false;
                if (this.currentScore === '') { uni.showToast({ title: '请输入当前分数', icon: 'none' }); return false; }
               break;
           case '定位赛':
                if (!this.beforeLevel) { uni.showToast({ title: '请选择上赛季段位', icon: 'none' }); return false; }
                if (!this.needGames) { uni.showToast({ title: '请选择需打场次', icon: 'none' }); return false; }
               break;
       }
       return true;
   },


    // --- 订单提交 ---
    submitOrder() {
        // 提交前进行表单校验
        if (!this.validateForm()) {
           return;
         }

        // 填充 formData 对象
        this.formData = {
            // 使用计算属性获取完整区服信息
            server: this.selectedServerText,
            mode: this.selectedMode,
             // 根据 selectedMode 条件赋值
            selectPass: this.selectedMode === '通行证' ? this.selectPass : null,
            currentLevel: this.selectedMode === '通行证' ? this.currentLevel : null,
            toLevel: this.selectedMode === '通行证' ? this.toLevel : null,
            currentTask: this.selectedMode === '排位赛' ? this.selectedCurrentTask : null,
            toTask: this.selectedMode === '排位赛' ? this.selectedToTask : null,
            currentScore: this.selectedMode === '排位赛' ? this.currentScore : null,
            needGames: this.selectedMode === '定位赛' ? this.needGames : null,
            beforeLevel: this.selectedMode === '定位赛' ? this.beforeLevel : null,
             // 可以加入价格和时间
            suggestedPrice: this.suggestedPrice,
            estimatedTime: this.estimatedTime,
        };

         // 清理 null 字段
        const orderData = {};
        for (const key in this.formData) {
            if (this.formData[key] !== null && this.formData[key] !== undefined && this.formData[key] !== '') {
                orderData[key] = this.formData[key];
            }
        }


        console.log("准备提交的订单数据:", orderData);

        // 使用 uni.navigateTo 跳转，传递序列化后的数据
        try {
            const queryString = encodeURIComponent(JSON.stringify(orderData));
             uni.navigateTo({
                 url: `/pages/SubmitOrder/DL/WWQYsubmitOrder/index?formData=${queryString}`
             });
        } catch (e) {
             console.error("序列化订单数据失败:", e);
             uni.showToast({ title: '订单数据处理失败', icon: 'error' });
        }
    }
  }
}
</script>

<style>
/* 添加容器样式和底部填充 */
.container-wwqydl {
    padding-bottom: 180rpx; /* 匹配 footer 高度 + tip 高度 */
}

/* 表单样式 (从 YXLMDL.vue 借鉴并调整) */
.form {
    width: 100%;
    background-color: #fff;
    padding: 20rpx 40rpx;
    box-sizing: border-box;
}

.form-item {
    margin-bottom: 30rpx;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #f0f0f0; /* 添加分隔线 */
    padding-bottom: 30rpx;
}
.form-item:last-child {
    border-bottom: none;
}
/* 通行证特殊样式 */
.pass-item .label {
    width: 20% !important; /* 覆盖默认宽度 */
    flex-shrink: 0;
}
.pass-item .pass-handle {
    width: 80% !important;
    display: flex;
    justify-content: flex-end;
}
/* uni-data-checkbox 按钮样式 */
.pass-handle .uni-data-checklist .checklist-group .checklist-box{
     margin-left: 10rpx !important;
     margin-right: 0 !important;
}
.pass-handle .uni-data-checklist .checklist-group .checklist-box.is--button {
    border: 1px solid #007aff !important;
    border-radius: 8rpx !important;
    padding: 5rpx 20rpx !important;
}
.pass-handle .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked {
    background-color: #007aff !important;
}
.pass-handle .uni-data-checklist .checklist-group .checklist-box.is--button .checklist-content{
    color: #007aff !important;
    font-size: 26rpx !important;
}
.pass-handle .uni-data-checklist .checklist-group .checklist-box.is--button.is-checked .checklist-content{
     color: #fff !important;
}


.form-item .label {
    width: 30%;
    height: 100%;
    display: block;
    font-size: 28rpx;
    color: #333; /* 加深标签颜色 */
}

.form-item .handle {
    width: 70%;
    cursor: pointer; /* 添加手型指示 */
}

.selected-tag {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 10rpx;
    height: 50rpx;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #666;
}

.selected-tag image {
    padding-left: 15rpx;
    width: 24rpx;
    height: 24rpx;
}

/* 弹窗样式 (从 YXLMDL.vue 借鉴并调整) */
.popup-content {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
}

.popup-content .top {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* 调整字体大小 */
    font-weight: bold;
    padding: 30rpx 20rpx 20rpx;
    border-bottom: 1rpx solid #eee;
}

.popup-content .body {
    max-height: 70vh; /* 限制最大高度 */
    display: flex;
}

.popup-nav {
    width: 200rpx;
    border-right: 1px solid #eee;
    background-color: #f8f8f8; /* 导航背景色 */
    height: 70vh; /* 匹配 body 最大高度 */
}

.nav-item {
    padding: 25rpx 20rpx; /* 调整内边距 */
    font-size: 28rpx;
    color: #666;
    text-align: center;
    border-bottom: 1rpx solid #eee;
}
.nav-item:last-child {
    border-bottom: none;
}

.nav-item.active {
    color: #1ba035; /* 激活颜色 */
    font-weight: bold;
    background-color: #fff; /* 激活背景色 */
}

.popup-scroll {
    flex: 1;
    height: 70vh; /* 匹配 body 最大高度 */
}

.popup-item {
    padding: 25rpx 40rpx; /* 调整内边距 */
    font-size: 28rpx;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
    text-align: center;
    cursor: pointer;
}
.popup-item:active { /* 添加点击效果 */
    background-color: #e0e0e0;
}

.popup-item:last-child {
    border-bottom: none;
}

.popup-item-title {
    font-size: 16px;
    font-weight: bold;
    padding: 15rpx 0 10rpx;
    text-align: left; /* 标题左对齐 */
    padding-left: 20rpx; /* 左侧留白 */
    margin-bottom: 10rpx;
}

.popup-item-body {
    display: flex;
    flex-wrap: wrap;
    padding: 10rpx 20rpx; /* 调整内边距 */
    justify-content: flex-start; /* 左对齐 */
}

.popup-item-body .popup-item-body-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100rpx; /* 最小宽度 */
    padding: 15rpx 25rpx; /* 调整内边距 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 8rpx;
    box-sizing: border-box;
    margin: 10rpx;
    font-size: 26rpx;
    cursor: pointer;
}
.popup-item-body .popup-item-body-item:active { /* 添加点击效果 */
     background-color: #e0e0e0;
     border-color: #bbb;
}

.popup-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 28rpx;
    color: #999;
}

/* 输入类型弹窗 (等级, 分数) */
.input-popup .input-row {
    display: flex;
    align-items: center;
    padding: 25rpx 40rpx;
    border-bottom: 1rpx solid #eee;
}
.input-popup .input-row span {
    width: 30%;
    font-size: 28rpx;
    color: #333;
}
.input-popup .input-row input {
    flex: 1;
    font-size: 28rpx;
    text-align: right; /* 输入内容右对齐 */
    color: #333;
}
.input-popup .input-row input::placeholder {
    color: #ccc; /* 占位符颜色 */
}
.input-popup .score-input input::placeholder { /* 分数输入框占位符样式 */
     font-size: 26rpx;
}

/* 弹窗底部按钮 */
.popup-footer {
    width: 100%;
    text-align: center;
    font-size: 30rpx; /* 字体稍大 */
    padding: 25rpx;
    color: #666; /* 取消按钮颜色 */
    border-top: 1px solid #eee;
    box-sizing: border-box;
    cursor: pointer;
}
.popup-footer:active { /* 点击效果 */
    background-color: #f0f0f0;
}

.popup-footer2 {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: #999;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.popup-footer2 .cancel,
.popup-footer2 .confirm {
    display: block;
    width: 50%;
    padding: 25rpx;
    text-align: center;
    font-size: 16px;
    box-sizing: border-box;
    cursor: pointer;
}

.popup-footer2 .cancel {
    color: #007aff; /* 取消颜色 */
}
.popup-footer2 .cancel:active {
    background-color: #f2f2f2;
}

.popup-footer2 .confirm {
    background-color: #007aff; /* 确认背景色 */
    color: #fff;
}
.popup-footer2 .confirm:active {
    background-color: #0056b3; /* 确认点击颜色 */
}


/* 订单信息区域 */
.orderMsg {
    width: 100%;
    display: flex;
    padding: 30rpx 40rpx; /* 调整内边距 */
    box-sizing: border-box;
    background-color: #f8f8f8; /* 背景色 */
    border-top: 1rpx solid #eee;
    border-bottom: 1rpx solid #eee;
}

.orderMsg .pay,
.orderMsg .time {
    width: 50%;
    display: flex;
    align-items: center; /* 图标和文字垂直居中 */
    justify-content: center;
}

.orderMsg .pay image,
.orderMsg .time image {
    width: 40rpx; /* 图标大小 */
    height: 40rpx;
    margin-right: 15rpx; /* 图标和文字间距 */
}

.orderMsg .pay .text,
.orderMsg .time .text {
    font-size: 26rpx; /* 调整字体 */
    font-weight: normal; /* 正常字重 */
    color: #666;
}
/* 高亮价格和时间 */
.price-highlight,
.time-highlight {
    color: red;
    font-weight: bold;
    margin-left: 5rpx;
}

/* 底部占位 */
.footer-placeholder {
    height: 180rpx; /* = footer 高度 + tip 高度 */
}

/* 底部固定区域 */
.footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff; /* 背景白色 */
    z-index: 10;
    border-top: 1rpx solid #e0e0e0; /* 顶部细线 */
}

.footer .tip {
    width: 100%;
    font-size: 24rpx; /* 提示文字缩小 */
    color: #999; /* 提示文字灰色 */
    background-color: #f8f8f8; /* 提示背景浅灰 */
    padding: 15rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.footer .button {
    width: 100%;
    height: 100rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #007aff; /* 主按钮颜色 */
    font-size: 32rpx;
    font-weight: bold;
    cursor: pointer;
}
.footer .button:active { /* 按钮点击效果 */
     background-color: #0056b3;
}

/* 可能需要为 uni-data-checkbox 的 v-deep 样式单独处理或全局定义 */

</style>